<template>
  <ul class="list">
    <!-- @ 是v-on 的缩写 -->
    <li class="item" v-for="item of letters"
        v-bind:key="item"
        :ref="item"
        @click="handleLetterClick"
        @touchstart.prevent="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd">{{item}}</li>
  </ul>
</template>

<script>
  export default {
    name: "CityAlphabet",
    props: { // 这个属性的定义 用于子组件接收父组件传递的值 。父组件向子组件传值时通过属性的方式进行传递
      cities: Object  //这是个对象
    },
    computed: {//构建计算出一个letters名称的属性 返回的值为数组
      letters () {
        const letters = []
        for (let i in this.cities) {
          letters.push(i)
        }
        return letters
      }
    },
    data () {
      return {
        touchStatus: false,
      }
    },
    methods: {//兄弟组件之间的传值Alphabet、List (思路如下：在当前组件下进行向外触发事件 然后在父组件中进行接收事件,并将改变的数据传给子组件Alphabet)
      handleLetterClick (e) {
        this.$emit('change',e.target.innerText) //调用这个事件名change 进行向外触发事件
        //打印字母表
        console.log(e.target.innerText)
      },
      handleTouchStart () {//手指触摸的时候 可以拖动
        this.touchStatus= true
      },
      handleTouchMove (e) {
        //以下滑动算法未进行函数节流 需优化
        if (this.touchStatus) {
          const startY = this.$refs['A'][0].offsetTop  //拿到A距离顶部的高度
          // console.log(startY)
          const touchY = e.touches[0].clientY - 87
          // console.log(touchY)
          const index = Math.floor((touchY - startY) / 21 )//手指滑动时字母的下标
          console.log(index)
          if (index >= 0 && index < this.letters.length)  {//基于这个判断 进行触发实时内容的滚动
            this.$emit('change',this.letters[index])
          }
        }
      },
      handleTouchEnd () {//结束滑动的时候 不可以拖动
        this.touchStatus= false
      }
    }
  }
</script>

<style scoped>
  .list{
    display: flex;
    flex-direction: column;
    justify-content: center;/*垂直居中*/
    position: absolute;
    top: 1.58rem;
    right: 0;
    bottom: 0;
    width: .4rem;
  }
  .item{
    /*水平居中*/
    line-height: .4rem;
    text-align: center;
    color: #00bcd4;
  }
</style>
